<template>
    <div class="demo2">
        <div class="demo2-header">
            <span class="header-info">二、form表单实现文件上传</span>
        </div>
        <div class="demo2-content">
            <div class="content-core">
                <form action="http://127.0.0.1:8090/uploadByBlob" method="post" enctype="multipart/form-data">
                    <label for="username">用户名：</label>
                    <input type="text" id="username" name="username">
                    <br>
                    <label for="password">密码：</label>
                    <input type="password" id="password" name="password">
                    <br>
                    <label for="avatar">头像1：</label>
                    <input type="file" id="avatar" name="multipartFile" multiple>
                    <br>
                    <label for="avatar">头像2：</label>
                    <input type="file" id="avatar" name="multipartFile" multiple>
                    <br>
                    <input type="submit" value="提交">
                </form>
            </div>
            <div class="content-info">
                <el-button type="success">ElementUi按钮</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
export default{
    name:"demo2",
    data:()=>{
        return {
            
        }
    },
    methods:{
        /**
         * 前端给后端发送文件两张传输方式:二进制blob传输、base64传输
         * 表单默认是二进制进行传输
         * 表单提交会有默认的跳转并提交请求，此处已经测试默认的跳转可以进行文件提交，这里采取
         * event.preventDefault();  //阻止表单默认提交
         */
        //表单默认提交事件
        handlerSubmit(event){
            const files = event.target.files;
            console.log(event.target.files);
        }
    }
}
</script>

<style scoped>
.demo2{
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.demo2-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 100px;
    color: blue;
}
.demo2-content .content-core label{
    display: inline-block;
    width: 70px;
}
.content-info{
    margin: 100px 0;
}
</style>